@import 'common-functions.less';
@import 'base-functions.less';

/*
-------------------------
     常见样式类
-------------------------
*/
.left {
    float: left;
}

.right {
    float: right;
}

// 水平线
.aj-hr {
    margin       : 1% auto;
    border       : 0;
    border-top   : 1px solid lightgray;
    border-bottom: 1px solid #fff;
    clear        : both;
}

// 快速制作1px 表格边框，为需要设置的 table 元素加上 border 的class即可
.aj-table {
    border         : 1px lightgray solid;
    border-collapse: collapse;
    border-spacing : 0;

    th {
        background-color: #efefef;
        letter-spacing  : 3px;
    }

    td,
    th {
        border     : 1px lightgray solid;
        line-height: 160%;
        height     : 120%;
        padding    : 6px;
    }

    tr {
        .transition (background-color 400ms ease-out);

        &:nth-child(odd) {
            background: #f5f5f5;
            box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
        }

        &:hover {
            background-color: #fbf8e9;
        }
    }

}

.aj-niceTable {
    border-spacing: 0;
    border        : solid #ccc 1px;
    border-radius : 6px;
    box-shadow    : 0 1px 1px #ccc;

    td,
    th {
        border-left: 1px solid #ccc;
        border-top : 1px solid #ccc;
        padding    : 10px;
        text-align : center;
    }

    tbody {
        tr {
            .transition (background-color 700ms ease-in-out);

            &:nth-child(even) {
                background: #f5f5f5;
                box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
            }

            &:last-child {
                td:first-child {
                    border-radius: 0 0 0 6px;
                }

                td:last-child {
                    border-radius: 0 0 6px 0;
                }
            }

            &:hover {
                background-color: #faf2c8;
            }
        }
    }


    th {
        background-color: #dce9f9;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
        .gradient (top, #ebf3fc, #dce9f9);
        text-align : center;
        border-top : none;
        box-shadow : 0 1px 0 rgba(255, 255, 255, .8) inset;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .5);

        &:first-child {
            border-radius: 6px 0 0 0;
        }

        &:last-child {
            border-radius: 0 6px 0 0;
        }

        &:only-child {
            border-radius: 6px 6px 0 0;
        }
    }

    td:first-child,
    th:first-child {
        border-left: none;
    }

    tfoot td {
        text-align: right;
    }
}

.aj-p,
.aj-text {
    .aj-text-function();
}

p.aj-note {
    font-size       : .9rem;
    border          : 1px solid lightgray;
    border-radius   : 3px;
    background-color: #eee;
    padding         : 2% 10%;
    text-align      : left;
    width           : fit-content;
    margin          : 2% auto;
}

.aj-text-quotation {
    color: gray;

    &:before {
        content  : '‟';
        font-size: 3rem;
    }

    &:after {
        content    : '”';
        font-size  : 3rem;
        font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    }
}

// 全屏幕蒙版
.aj-mask {
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, .5);
    position        : fixed;
    top             : 0;
    left            : 0;
    z-index         : 9999;
}

// 图片容器
.ajaxjs-imgHolder {
    position       : relative;
    overflow       : hidden;
    min-height     : 70px;
    background     : no-repeat center top url('');
    background-size: 110% 80%;

    img {
        width         : 100%;
        height        : 100%;
        vertical-align: top;
    }

    h3,
    h4 {
        position        : absolute;
        bottom          : 0;
        left            : 0;
        height          : 25px;
        background-color: rgba(0, 0, 0, 0.3);
        padding         : 1%;
        white-space     : nowrap;
        overflow        : hidden;
        text-overflow   : ellipsis;
        width           : 100%;
        color           : white;
    }

    .m_checkbox {
        width              : 20px;
        height             : 20px;
        border             : 5px solid rgba(0, 255, 0, .5);
        border-right-width : 2px;
        border-bottom-width: 2px;
        position           : absolute;
        top                : 5px;
        right              : 5px;
    }

    .m_selected {
        position       : absolute;
        top            : 5px;
        right          : 5px;
        width          : 25px;
        height         : 25px;
        background     : no-repeat url();
        background-size: 100%;
    }
}

// 适合包围一个区域用
fieldset.aj-fieldset {
    border-radius: 5px;
    border       : 1px solid gray;
    padding      : 2%;
    margin       : 1% 0;

    legend {
        font-weight   : bold;
        letter-spacing: 2px;
    }

    li {
        list-style         : disc;
        list-style-position: inside;
    }
}

// 分隔样式
fieldset.aj-div {
    border-bottom: 0;
    border-left  : 0;
    border-right : 0;
    border-top   : 1px solid lightgray;
    width        : 90%;

    legend {
        text-align: center;
    }
}

// 隐藏 ReCAPTCHA 图标
.grecaptcha-badge {
    display: none;
}

// 不是函数会重复 import,怎么办
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-out-hide {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        display: none;
    }
}